<template>
    <div class="distance-list">
        <search-form :searchArray="searchArray" :searchObj="searchObj" @clear="clear">
            <choicePhamy slot="choiceCumster" @choicePhamy="choicePhamy" ref="choiceCumster"></choicePhamy>
        </search-form>
        <elTable :formData="formData">
                <el-table-column prop="name" label="终端客户名称" align="center"></el-table-column>
                <el-table-column prop="phone" width="120px" label="手机号码" align="center"></el-table-column>
                <el-table-column prop="area" label="收货地区" align="center"></el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="120px;" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="seeBuyGoods(scope.row)">查看已购商品</el-button>
                    </template>
                </el-table-column>
        </elTable>
        <dialogs
        :visible="visible"
        title="查看"
        width="600px"
        @confirm="visible.show = false"
        >
            <elTable :formData="formDatas">
                <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
                <el-table-column prop="phone" width="120px" label="商品规格" align="center"></el-table-column>
                <el-table-column prop="phone" width="120px" label="商品批号" align="center"></el-table-column>
                <el-table-column prop="phone" width="120px" label="批准文号" align="center"></el-table-column>
                <el-table-column prop="phone" width="120px" label="购买数量" align="center"></el-table-column>
        </elTable>
        </dialogs>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
import choicePhamy from '@/components/Choice/phamy'
export default {
    name: 'distanceList',
    components: {
        elTable,
        choicePhamy
    },
    data () {
        return {
            visible: {
                show: false
            },
            formDatas: {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                data: []
            },
            formData: {
                currentPage: 1,
                pageSize: 10,
                total: 2,
                data: [
                    {
                        id: '1',
                        name: '老百姓大药房',
                        phone: '15558007252',
                        area: '广东省_广州市_花都区'
                    },
                    {
                        id: '2',
                        name: '西湖大药房',
                        phone: '15558007251',
                        area: '浙江省_杭州市_西湖区'
                    }
                ]
            },
            searchObj: {
                name: '',
                num: '',
            },
            searchArray: [
                {
                    type: 'slot',
                    value: '',
                    label: '终端客户名称',
                    placeholder: '请选择终端客户名称',
                    key: 'name',
                    slotName: 'choiceCumster'
                },
                {
                    type: 'input',
                    value: '',
                    label: '距离范围（米）',
                    placeholder: '请输入距离范围（米',
                    key: 'num'
                },
            ],
        }
    },
    methods: {
        choicePhamy () {

        },
        clear () {
            this.$refs.choiceCumster.clear()
        },
        seeBuyGoods () {
            this.visible.show = true
        }
    }
}
</script>
<style lang="scss" scoped>
.distance-list {
    .search-form {
        margin-bottom: 16px;
    }
}
</style>